/**
 * Created with File
 * Author: Chuans
 * Github: https://github.com/chuans
 * Date: 2018/9/7
 * Time: 下午3:37
 */

import * as React from 'react';
import {observer} from 'mobx-react';
import UTable from './table';
import SearchHeader from '../../components/search-header'
import {message, Modal, Input, Button, Spin} from 'antd';
import CompUserStore from './store';
import {searchForm} from './form';
import {SelectUserProps} from '../../interface/component'
import './style.less';

@observer
export default class extends React.Component<SelectUserProps> {
    constructor(props: any) {
        super(props);
    }

    public async componentDidMount() {
        try {
            const result: any = await CompUserStore.getList(CompUserStore.searchStatus);

            if (result) {
                message.error(result);
            }
        } catch (err) {
            message.error(err);
        }
    }

    public onHandleSubmit = async (values: any) => {
        try {
            const result = await CompUserStore.getList(Object.assign(CompUserStore.searchStatus, values));

            if (result) {
                message.error(result);
            }
        } catch (err) {
            message.error(err);
        }
    }

    public onPageChange = async ({current}: Common.Pager) => {
        await this.onHandleSubmit({pageIndex: current});
    }

    public onHandleOk = (record: any) => {
        CompUserStore.setCurrentSelect(`${record.nick_name}-${record.phone}`);
        CompUserStore.setVisible();
        this.props.onValueChange(record);
    }
    public onSelectAll = () => {
        CompUserStore.setCurrentSelect('所有人');
        CompUserStore.setVisible();
        this.props.onValueChange(-1000);
    }
    public render() {
        const {pageSize, pageIndex} = CompUserStore.searchStatus;

        const pager: Common.Pager = {
            total: CompUserStore.total,
            pageSize,
            current: pageIndex,
        };

        return (
            <div className="select-users-comp">
                <div className="select-button">
                    <Input
                        className="input"
                        type="text"
                        placeholder="请选择用户群体"
                        disabled={true}
                        value={CompUserStore.currentSelect}
                    />
                    <Button onClick={() => CompUserStore.setVisible(true)}>
                        {CompUserStore.currentSelect ? '更换选择' : '选择用户'}
                    </Button>
                </div>
                <Modal
                    title="选择用户"
                    width="88%"
                    onCancel={() => CompUserStore.setVisible()}
                    visible={CompUserStore.modalVisible}
                    footer={(
                        <div className="select-user-modal-buttons">
                            <Button type="primary"
                                    size="large"
                                    style={{margin: '10px 0'}}
                                    onClick={this.onSelectAll}>
                                选择所有用户
                            </Button>
                            <Button style={{margin: '10px 0'}}
                                    onClick={() => CompUserStore.setVisible()}>
                                取消选择
                            </Button>
                        </div>
                    )}
                >
                    <Spin spinning={CompUserStore.listLoading} size="large">
                        <SearchHeader className="select-user-search-header"
                                      onHandleSubmit={this.onHandleSubmit}
                                      dataForm={searchForm}/>
                        <UTable
                            className="select-user-table"
                            onSelectUser={this.onHandleOk}
                            datas={CompUserStore.list}
                            pager={pager}
                            onPageChange={this.onPageChange}
                        />
                    </Spin>
                </Modal>
            </div>

        )
    }
}